<template>
    <div>
        <div class="box">
            <div class="top">
                <el-input v-model="from.idorname" placeholder="请输入地址" />
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="success" @click="getAdd">添加</el-button>
                <el-button type="danger" @click="delAll">批量删除</el-button>
            </div>
            <div class="list">
              <mytable
                :tableHeader="tableHead"
                :tableData="addlist"
                @del="del"
                @plain="lookcode"
                @update="emit"
              ></mytable>
               
            </div>
            <!-- 分页 -->
            <div class="page">
                
                <pages
                :totalNum="total" @changePageSize="handleSizeChange" @changePage="handleCurrentChange"
                >
                </pages>
            </div>
            <!-- 弹出框 -->
            <div class="addbox">
                <el-dialog
                    v-model="dialogVisible"
                    :title="qcodetitle"
                    width="20%"
                    :before-close="handleClose"
                >
                   
                    <div class="code"> 
                      <vue-qr 
                          colorDark="#000" 
                          :logoSrc="qcode.codeImg" 
                          :text="qcode.codeUrl" 
                          :size="200" 
                          :margin="0" 
                          :logoMargin="10"
                          :correctLevel="3" 
                          :autoColor="false" 
                          ref="vqcode"
                          >
                      </vue-qr>
                    </div>

                    <template #footer>
                    <span class="dialog-footer">
                        <el-button type="success" @click="downloadImage">下载二维码</el-button>
                    </span>
                    </template>
                </el-dialog>
            </div>
        </div>
    </div>
</template> 

<script setup lang="ts">
import { reactive, ref ,onMounted,toRefs} from 'vue'
import { ElTable,ElMessageBox, ElMessage  } from 'element-plus'
import { addressList,addressDel } from "../../api/track/index";//接口
import zhCn from 'element-plus/lib/locale/lang/zh-cn'//国际化
import router from '../../router/router';//路由
import vueQr from 'vue-qr/src/packages/vue-qr.vue'//下载图片
import mytable from '../../components/common/table.vue' //表格
import pages from '../../components/common/paging.vue' //分页
import type { IRouteList, ITableHerader  } from "../../types/points/points";

const input = ref('')
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
interface User {
  date: string
  name: string
  address: string
}

onMounted(()=>{
    getAddressList()
})

const data=reactive({
    from:{
        id:'0',
        page:1,
        pageSize:10,
        idorname:'',
        name:''
    }
})

const { from } = toRefs(data)

const tableHead=ref<Array<ITableHerader>>([
  {
        prop:"name",
        label:"地址",
        width:'820'
    },
    
    {
        label:'操作',
        type:'button',
       buttons:[
       
            {
                text:'生成二维码',
                event:'plain',
                // type:'' ,
                // show:true ,
                plain:true
              },
            {
                text:'修改',
                event:'update',
                type:'success',
                show:true
            },
            {
                text:'删除',
                event:'del',
                type:'danger',
                show:true
            },
           
        ]
     
    }
])
const dialogVisible = ref(false)//是否弹框
let qcodetitle=ref('查看二维码')//弹出层标题
let vqcode = ref<any>(null)
let addlist=ref<Array<IRouteList>>([])//点位列表 
//请求点位列表 
const getAddressList = async () => { 
  const res: any = await addressList(data.from)
  console.log('res',res)
if (res.code === '00000') {
  
  addlist.value=res.data
  total.value=res.total

} 
}

let total=ref(0)//页数

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  getAddressList()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  getAddressList()
}

// 搜索
const search=()=>{
    getAddressList()
    
}

// 添加
const getAdd=()=>{
  router.push('/pointAdd')
}

// 删除
const del =async (val:any)=>{

  const res:any=await addressDel({id:val.id})
  // console.log(res);
  if(res.code=='00000'){
    ElMessage({
      message:'删除成功',
      type:'success'
    })
    getAddressList()//刷新数据
  }
  
}

// 批删 
const multipleSelection = ref<User[]>([])
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val.map((item:any)=>item.id)
  console.log(multipleSelection.value);
  
}

// 批量删除
const delAll=async ()=>{
  let ids:any=ref([])
  ids=multipleSelection.value //选中的值
  let res:any=await addressDel({id:ids})
  // console.log(res);
  if(res.code=='00000'){
    ElMessage({
      message:'批量删除成功',
      type:'success'
    })
    getAddressList()
  }
  
}

// 修改
// const emitid=ref<number|null>(null)
const emit=(data:any)=>{
  let {id,name} = data
  console.log("修改带过去的值",data);
  router.push( {path:'/pointupdate', query: {name,id}})
  
  
}
// 查看二维码
const lookcode=(val:IRouteList)=>{
  console.log(val);
  dialogVisible.value=true
  qcodetitle.value=val.name
  
}

// 弹出框
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('是否关闭弹框？')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
// 二维码 logo地址 扫描后跳转的地址
const qcode = {
   codeImg: new URL('../../assets/logo.jpg', import.meta.url).href,
   codeUrl: 'http://visitor.lening365.cn/h5/index.html?id=undefined#/'
}
const downloadImage =  (row:any) => { // 下载图片地址和图片名
    // 下载图片
let a = document.createElement('a') // 创建a标签
a.style.display = 'none' // 隐藏a标签
a.download = qcodetitle.value+'的二维码' // 下载的文件名
a.href = vqcode.value.imgUrl // 下载图片
// a.href = qcode.codeImg // 要下载的文件地址
// a.href = "http://apis.90000p.com/exam2/upload/student.xlsx" // 要下载的文件地址
document.body.appendChild(a) // 添加到body中
a.click(); // //触发下载
document.body.removeChild(a)  //移除a标签
}


</script>

<style scoped lang="less">
.box{
    .top{
        width: 500px;
        margin-bottom: 30px;
        display: flex;
        .el-input{
            margin: 0 5px;
        }
    }
}
.btn{
   display: flex;
   justify-content: center;
}
/deep/.el-table .el-table__cell {
    padding: 8px 0;
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: center; 
    z-index: 1;
}
.dialog-footer{
    display: block;
    text-align: center;
}
.page{
  width: 500px;
  margin: 0 auto;
}
</style>